<template>
	<view class="bg-white">
		<view class="flex flex-column u-p-t-30 u-p-x-30 ">
			<view class="flex-1">
				<view class="flex align-center">
					<image :src="specInfo.imgshow" style="width: 180rpx;height: 180rpx;" mode=""></image>
					<view class="flex flex-column u-m-l-30 u-p-t-10" style="height: 180rpx;">
						<view class="flex align-end">
							<text class="u-font-40 u-m-r-10 text-danger">¥</text>
							<text class="u-font-40 text-danger">{{specInfo.goods_price}}</text>
						</view>
						<text class="t-font-24 text-greey mt-30">库存{{specInfo.stock_num}}件</text>
						<!-- <text class="t-font-24 text-greey">已选 红色</text> -->
					</view>
				</view>
			</view>
			
			<view class="">
				<block v-for="(item,index) in attrList" :key="index">
					<goods-detail-sku-item :item="item" :index="index" @checkedID="checkedID"></goods-detail-sku-item>
				</block>
			</view>
			<view class="flex align-center justify-between u-p-y-30">
				<text class="u-font-26 font-weight-bold">数量</text>
				<view class="flex align-center " >
					<!-- #ifndef APP-NVUE -->
					<view class="text-center border rounded-25" @click="minus" style="width: 50rpx;height: 50rpx; line-height: 50rpx;">
						<u-icon name="minus" ></u-icon>
					</view>
					<text class="u-m-x-20 u-font-16">{{buyNum}}</text>
					<view class="text-center border rounded-25" @click="plus" style="width: 50rpx;height: 50rpx; line-height: 50rpx;">
						<u-icon name="plus" ></u-icon>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<view class="border rounded-25" @click="minus" style="width: 50rpx;height: 50rpx; line-height: 50rpx;">
						<text class="position-relative text-center u-font-40" style="top: -2rpx;line-height: 50rpx">-</text>
					</view>
					<text class="u-m-x-20 u-font-30">{{buyNum}}</text>
					<view class="border rounded-25" @click="plus" style="width: 50rpx;height: 50rpx; line-height: 50rpx;">
						<text class="position-relative text-center u-font-40" style="top: -2rpx;line-height: 50rpx">+</text>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="flex align-center justify-center" style="height: 76rpx;">
			<view class="flex-1 flex align-center justify-center" style="background-color: #ff8900; height: 76rpx" @click="$emit('addToCart', buyNum)">
				<text class="u-font-26 text-white">加入购物车</text>
			</view>
			<view v-if="goodsType != 5" class="flex-1 flex align-center justify-center buy-btn" style="height: 76rpx" @click="$emit('buyNow', buyNum)">
				<text class="u-font-26 text-white">立即购买</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'goods-detail-skuPop',
		props: {
			details: {
				type: Object,
				default() {
					return {}
				}
			},
			specInfo: {
				type: Object,
				default() {
					return {}
				}
			},
			attrList: {
				type: Array,
				default() {
					return []
				}
			},
			goodsType:{
				type: String,
				default: ''
			},
		},
		data() {
			return {
				buyNum: 1,
			}
		},
		watch:{
			specInfo:{
				handler(){
					console.log(49494949, this.specInfo);
				},deep:true
			},
			details:{
				handler(){
					console.log(111111, this.details);
				},deep:true
			},
		},
		methods: {
			checkedID(e) {
				this.$emit('checkedIds', e)
			},
			minus() {
				if(this.buyNum == 1) return 
				this.buyNum--
			},
			plus() {
				this.buyNum++
			}
		}
	}
</script>

<style lang="scss" scoped>
.buy-btn{
	// #ifdef APP-PLUS
	background-color: #FE572A;
	// #endif
	// #ifndef APP-PLUS
	background-color: var(--mainColor);
	// #endif
}
</style>
